<template>
	<div class="customer_service">
		<!-- 面包屑 -->
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>客服管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="cs_all">
			<!--左侧选择对话-->
			<div class="cs_aside">
				<div v-for="(customer,index) in customerList" :key="index" @click="customerClick(index)" :class="index === currentCustomer ? 'customer_2' : 'customer_1'">
					<div class="cs_aside_img">
						<el-avatar  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
					</div>
					<div class="cs_aside_name">
						{{customer.fromUser}}
					</div>
				</div>
			</div>
			<div class="cs_right">
				<!--头部条-->
				<div class="cs_head">
					<div class="cs_head_img">
						<el-avatar  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
					</div>
					<div class="cs_head_name">
						{{customerList.length===0 ? '':customerList[currentCustomer].fromUser}}
					</div>
				</div>
				<!--中间对话内容-->
				<div class="cs_main">
					<div v-for="talk in customerList.length===0 ? [] : customerList[currentCustomer].talkList" :class="{talk_1:talk.style==0,talk_2:talk.style==1}">
						<div class="talk_name">{{talk.user}}</div>
						<div class="talk_content">
							<div class="talk_content_text">{{talk.content}}</div>
						</div>
					</div>
				</div>
				<!--下方输入框-->
				<div class="cs_footer">
					<div>
						<el-input type="textarea" placeholder="请输入内容" v-model="msg.textMessage" maxlength="100" show-word-limit resize="none">
						</el-input>
					</div>
					<div class="cs_footer_bt">
						<el-button type="primary" size="small" @click="sendMsg">发送</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import CustomerServiceService from './CustomerServiceService.js';
	export default {
		name: "CustomerService",
		data() {
			return {
				customerList: [],
				currentCustomer: 0,
				ws: '',
				serviceName: '',
				msg: {
					toUser: '',
					textMessage: ''
				},
			}
		},
		created() {
			CustomerServiceService.getlogin(res => {
				this.serviceName = res.loginUser.user_name;
				this.createConnection();
			});
		},
		beforeDestroy() {
			this.ws.close();
		},
		methods: {
			//点击左侧人名，更改点击的flag为1，把左侧人名里的talkList赋给当前页talkList
			customerClick(index) {
				this.currentCustomer = index;
			},
			wsMessage(event) {
				console.log(event.data);
				let data = window.JSON.parse(event.data);
				let index = this.customerList.map(item => item.fromUser).indexOf(data.fromUser);
				if (index != -1) {
					this.customerList[index].talkList.push({
						style: 0,
						user: data.fromUser,
						content: data.textMessage
					});
				} else {
					this.customerList.push({
						fromUser: data.fromUser,
						head_img: '',
						talkList: [{
							style: 0,
							user: data.fromUser,
							content: data.textMessage
						}],
					});
				}
			},

			wsOpen() {
				console.log('websocket-连接已经建立');
			},
			wsError() {
				console.log('websocket-出现错误');
			},
			wsClose() {
				console.log('websocket-连接已经关闭');
			},
			createConnection() {
				this.ws = new WebSocket(`ws://localhost:8080/wss/cservice/1/${this.serviceName}`);

				this.ws.onopen = this.wsOpen;
				this.ws.onclose = this.wsClose;
				this.ws.onerror = this.wsError;
				this.ws.onmessage = this.wsMessage;
			},
			sendMsg() {
				this.customerList[this.currentCustomer].talkList.push({
					style: 1,
					user: this.serviceName,
					content: this.msg.textMessage
				});
				this.msg.toUser = this.customerList[this.currentCustomer].fromUser;
				this.ws.send(window.JSON.stringify(this.msg));
				this.msg.textMessage = '';
			}
		},
	}
</script>

<style lang="less">
	@import '../../style/Common.less';

	.cs_all {
		display: flex;
		height: 580px;
		width: 800px;
		border: 1px solid #f5e2e2;
		box-shadow: 0 0 24px 0 rgba(15, 66, 76, .25);
		border-radius: 4px;
		margin: 20px 20%;

	}

	.cs_aside {
		width: 160px;
		background-color: #f0f2f5;

		.cs_aside_img {
			margin: auto 10px;
		}

		.cs_aside_name {
			margin: 10px;
		}

		.customer_1 {
			display: flex;
			height: 60px;
			cursor: pointer;
		}

		.customer_2 {
			display: flex;
			height: 60px;
			background-color: #d0d5d5;
			cursor: pointer;
		}
	}

	.cs_right {
		height: 580px;
		width: 640px;
	}

	.cs_head {
		height: 60px;
		width: 100%;
		background-color: rgb(9, 174, 176);
		line-height: 60px;
		display: flex;

		.cs_head_img {
			margin: 10px 20px;
			float: left;
		}

		.cs_head_name {
			color: white;
		}
	}

	.cs_main {
		height: 420px;
		width: 600px;
		background-color: white;
		overflow-y: scroll;
		padding: 0 20px;

		.talk_1 {
			margin: 10px 0;

			.talk_name {
				height: 20px;
				color: #9aa0a1;
				font-size: 12px;
				text-align: left;
			}

			.talk_content {
				color: black;
				height: 42px;

				.talk_content_text {
					float: left;
					padding: 5px;
					margin: 5px 0;
					background-color: #e9f0ef;
				}
			}
		}

		.talk_2 {
			margin: 10px 0;

			.talk_name {
				height: 20px;
				color: #9aa0a1;
				font-size: 12px;
				text-align: right;
			}

			.talk_content {
				color: white;
				height: 42px;

				.talk_content_text {
					float: right;
					padding: 5px;
					margin: 5px 0;
					background-color: rgb(9, 174, 176);
				}
			}
		}
	}

	.cs_footer {
		height: 100px;
		width: 640px;
		position: absolute;

		.el-textarea__inner {
			height: 100px !important;
		}

		.cs_footer_bt {
			position: relative;
			left: 570px;
			bottom: 90px;
		}
	}
</style>
